<%@ taglib prefix="novatar" uri="/novatar-tags"%><%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <novatar:head title="Bootstrap Test" includeCoreJs="false" />
    <novatar:bootstrap cssOnly="true"/>
  </head>
  <body>
    <div class="container">
        <label class="col-md-offset-1 col-md-11 control-label"><h3>日期时间选框</h3></label>
        <div class="row">
            <div class="form-group col-md-7">
                <div class='input-group date' id='datetimepicker'>
                    <input type='text' class="form-control" readonly/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <label class="col-md-offset-1 col-md-11 control-label"><h3>进度条</h3></label>
        <div class="row">
            <div class="form-group col-md-7" style="height:200px;" id="loading-mask-test-div">
                <p>测试段落......测试段落......测试段落......测试段落......测试段落......测试段落
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon-test">测试输入框</span>
                        <input class="form-control" name="username" type="text"
                            aria-describedby="basic-addon-test">
                    </div>
                ......测试段落......测试段落......测试段落......测试段落......测试段落......测试段落
                ......测试段落......测试段落......测试段落......测试段落......测试段落......测试段落
                ......测试段落......测试段落......测试段落......测试段落......测试段落......测试段落
                    <div class="form-group col-md-offset-1 col-md-10">
                        <div class="col-md-offset-4 col-md-2"> 
                            <button id="btnSubmitTest" type="button" class="btn btn-primary btn-sm">测试遮罩，等待框</button>
                        </div>
                    </div>
                </p>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-md-7">
                <div class="progress">
                  <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
                    ==请等待==
                  </div>
                </div>
            </div>
        </div>
        <label class="col-md-offset-1 col-md-11 control-label"><h3>Table</h3></label>
        <div class="row">
            <div class="form-group col-md-7">
                <table id="table" data-pagination="true" data-page-list="[2, 5]">
                    <thead>
                        <tr>
                            <th data-field="id">Item ID</th>
                            <th data-field="name" data-align="right">Item Name</th>
                            <th data-field="price">Item Price</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        <label class="col-md-offset-1 col-md-11 control-label"><h3>表单校验</h3></label>
        <div style="padding-left:15px;padding-right:15px;">
            <div class="row">
                <form id="example-form" role="form" class="form-horizontal">
                    <div class="form-group control-group col-md-offset-1 col-md-7">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">用户名</span>
                            <input class="form-control" name="username" type="text" placeholder="用户名"
                                aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="form-group control-group col-md-offset-1 col-md-7">
                        <div class="input-group">
                            <input class="form-control" name="email" type="text" placeholder="邮箱地址"
                                aria-describedby="basic-addon2">
                            <span class="input-group-addon" id="basic-addon2">邮箱示例 user@example.com</span>
                        </div>
                    </div>
                    <div class="form-group control-group col-md-offset-2 col-md-6">
                        <div class="checkbox">
                            <label>
                              <input type="checkbox" name="chk">单选框示例
                            </label>
                        </div>
                    </div>
                    <div class="form-group control-group col-md-offset-1 col-md-7">
                        <div class="input-group">
                            <span class="input-group-addon">人民币元</span>
                            <input id="money" class="form-control" name="money" type="number">
                            <span class="input-group-addon">.00</span>
                        </div>
                    </div>
                    <div class="form-group control-group col-md-offset-1 col-md-7">
                        <label class="col-sm-2 control-label">多选框</label>
                        <div class="col-sm-10">
                            <select id="multiSelect-sample" name="opt" multiple="multiple" class="hidden">
                            </select>
                        </div>
                    </div>
                    <div class="form-group col-md-offset-1 col-md-11">
                        <label class="col-md-2 control-label">表单内容</label>
                        <p id="form_content" class="col-md-10 form-control-static">&nbsp;</p>
                    </div>
                    <div class="form-group col-md-offset-1 col-md-10">
                        <div class="col-md-offset-6 col-md-2"> 
                            <button id="btnSubmit" type="button" class="btn btn-primary btn-sm">表单内容提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <label class="col-md-offset-1 col-md-11 control-label"><h3>Tab页面</h3></label>
        <div class="row">
            <div class="form-group col-md-7">
                <button id="btnAddTab" type="button" class="btn btn-primary btn-sm">添加Tab页面4</button>
                <button id="closeTab" type="button" class="btn btn-primary btn-sm">关闭Tab页面4</button>
            </div>
            <div class="form-group col-md-7">
                <!-- Nav tabs -->
                <ul id="myTabs" class="nav nav-tabs" role="tablist">
                  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">首页</a></li>
                  <li role="presentation"><a href="#tabPage1" aria-controls="tabPage1" role="tab" data-toggle="tab">页面1</a></li>
                  <li role="presentation"><a href="#tabPage2" aria-controls="tabPage2" role="tab" data-toggle="tab">页面2</a></li>
                  <li role="presentation"><a href="#tabPage3" aria-controls="tabPage3" role="tab" data-toggle="tab">页面3</a></li>
                </ul>
                
                <!-- Tab panes -->
                <div id="tab-content" class="tab-content">
                  <div role="tabpanel" class="tab-pane fade" id="home"><p>这个是Tab 首页<br><br><br><br><br><br><br><br></p></div>
                  <div role="tabpanel" class="tab-pane active" id="tabPage1"><p>这个是Tab 页面 1<br><br><br><br><br><br><br><br></p></div>
                  <div role="tabpanel" class="tab-pane fade" id="tabPage2"><p>这个是Tab 页面 2<br><br><br><br><br><br><br><br></p></div>
                  <div role="tabpanel" class="tab-pane fade" id="tabPage3"><p>这个是Tab 页面 3<br><br><br><br><br><br><br><br></p></div>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <novatar:core />
    <novatar:bootstrap jsOnly="true" />
    <script>
    $(function() {
        $("#btnSubmitTest").click(function(e){
            $.bootstrapLoading.show("正在处理中，请稍候！", "#loading-mask-test-div");
            setTimeout(function() {
                $.bootstrapLoading.close();
            }, 3000);
        });
        $('#datetimepicker').datetimepicker({
            format : 'YYYY-MM-DD HH:mm:ss',
            sideBySide : true,
            showTodayButton: true,
            useCurrent : true,
            allowInputToggle : true,
            ignoreReadonly : true
        });
        //表单校验
        $('#example-form').validate({  
            rules: {
                username: {
                    required: true,
                    ordChars : true,
                    minlength: 2
                },
                email: {
                    required: true,
                    email: true
                },
                money: {
                    required: true,
                    minlength: 2
                }
            }
        });
        
        //表单数据提交
        $('#btnSubmit').click(function(e) {  
            $('#example-form').validate().form();
            $("#form_content").html(JSON.stringify($("#example-form").serializeJson()));
        });
        
        //多选框combobox
        $('#multiSelect-sample').multiselect({
            buttonWidth: '150px',
            includeSelectAllOption: true,
            enableFiltering: true
        });
        var options = [
            {label: 'Option 1', title: 'Option 1', value: '1', selected: true},
            {label: 'Option 2', title: 'Option 2', value: '2'},
            {label: 'Option 3', title: 'Option 3', value: '3', selected: true},
            {label: 'Option 4', title: 'Option 4', value: '4'},
            {label: 'Option 5', title: 'Option 5', value: '5'},
            {label: 'Option 6', title: 'Option 6', value: '6'}
        ];
        $('#multiSelect-sample').multiselect('dataprovider', options);
        $("#multiSelect-sample").multiselect('select', '2');
        
        
        $("#btnAddTab").click(function(e) {  
            $('#tab-content').append('<div role="tabpanel" class="tab-pane fade" id="tabPage4"><p>这个是Tab 页面 4</p></div>');
            $('#myTabs').append('<li role="presentation"><a href="#tabPage4" aria-controls="tabPage4" role="tab" data-toggle="tab">页面4</a></li>');
            
            $('#myTabs a[href="#tabPage4"]').tab('show')
        });
        
        $("#closeTab").click(function(e) {
            $('#myTabs a[href="#tabPage4"]').parent().remove();
            $("#tabPage4").remove();
            $('#myTabs a[href="#tabPage2"]').tab('show')
        });
        //分别 role="tablist" 和 role="tab"
        $('#myTabs a[href="#tabPage2"]').tab('show')
        
        $('#table').bootstrapTable({
            pageSize : 5,
            data: [{
                id: 1,
                name: 'Item 1',
                price: '$1'
            }, {
                id: 2,
                name: 'Item 2',
                price: '$2'
            }, {
                id: 3,
                name: 'Item 3',
                price: '$3'
            },{
                id: 4,
                name: 'Item 4',
                price: '$4'
            }, {
                id: 5,
                name: 'Item 5',
                price: '$5'
            }, {
                id: 6,
                name: 'Item 6',
                price: '$6'
            }]
        });
        
        $("#progress-bar").attr("aria-valuenow", 90).css("width", "90%");
    });
    </script>
  </body>
</html>